<script setup lang="ts" >
import { ref } from 'vue';
import {showToast} from "vant";

import {useRouter} from "vue-router";




let orginItems = [
  {
    text: '性别',
    children: [
      { text: '男', id: '男' },
      { text: '女', id: '女' },
      { text: '保密', id:  '保密',  },
    ],
  },
  {
    text: '学历',
    children: [
      { text: '大一', id: '大一' },
      { text: '大二', id: '大二' },
      { text: '大三', id: '大三' },
    ],
  }
];
let items = ref(orginItems);
const activeIds = ref([]);
const activeIndex = ref(0);
const searchText = ref('');
const close = (id)=>{
  activeIds.value = activeIds.value.filter(item=>item!==id)
}
const onSearch = (id)=>{
// console.log(items.flatMap(item=>item.children).filter(item=>item.text.includes(searchText.value)));
  items.value = orginItems.map(parentitem=>{
    const tempparentitem = {...parentitem};
    const tempchildren = [...parentitem.children];
    tempparentitem.children=tempchildren.filter(item=>item.text.includes(searchText.value))
    return tempparentitem;
  })
}
const onCancel = (id)=>{
  searchText.value = '';
  items.value = orginItems;
  // console.log("1233");
}
// const onCancel = () => showToast('取消');
const router = useRouter();
const search =()=>{
  router.push(
      {
        path: "/user/list",
        query: {
          tags:activeIds.value,
        }
      }
  )

}
</script>

<template>
  <van-search v-model="searchText" placeholder="请输入搜索关键词" autofocus   @search="onSearch"
              @clear="onCancel" clearable/>
  <van-divider content-position="left">已选标签</van-divider>
  <van-row style="padding: 0 16px">
    <van-tag  v-for="tag in activeIds" :show="true" closeable size="medium" type="primary" @close="close(tag)" >
      <div v-if="activeIds.length===0">请选择标签</div>
      {{tag}}
    </van-tag>
  </van-row>

  <van-divider content-position="left">选择标签</van-divider>
  <van-tree-select
      v-model:active-id="activeIds"
      v-model:main-active-index="activeIndex"
      :items="items"
  />
  <van-button type="primary" @click="search">提交</van-button>
</template>

<style scoped>

</style>